<template>
  <div class="menu">
    <a-list class="list">
      <a-list-item 
        v-if="menuItem.list"
        v-for="item in menuItem.list" 
        :key="item" 
        :class="{ 'menuitem': true, 'editing': item.isEditing, 'selected': selectedItem === item.chatId }"
        @click="displayconversion(item.chatId,item)"
        @mouseover="showActions(item.chatId)"
        @mouseleave="hideActions"
      >
        <template v-if="!item.isEditing">
          <MessageOutlined />
          <div class="item-content">{{ item.title }}</div>
        </template>
        <template v-else>
          <MessageOutlined />
          <input  
            type="text"
            ref="editInputRef"
            v-model="item.title" 
            @keyup.enter="saveEdit(item)"
            @blur="handleBlur(item)"
            style="border-color: transparent;"
          />
        </template>
        <template v-if="item.chatId === activeItem">
          <EditOutlined class="edit-icon" @enter="editItem(item)" @click="editItem(item)" />
          <DeleteOutlined class="delete-icon" @click="deleteItem(item)" />
        </template>
      </a-list-item>
      <a-empty v-else class="empty" :description="null" />
    </a-list>
  </div>
</template>
  
<script lang="ts" setup>
import { DeleteOutlined, EditOutlined, MessageOutlined } from '@ant-design/icons-vue';
import { onMounted, ref } from 'vue';

import {
deleteTitle,
editTitle,
findConversion
} from '@/api/dashboard/chat';
import { message as Message } from 'ant-design-vue';

export interface chatlist {
  list?: Array<{ chatId?: Number; title?: string; isEditing?: boolean; isDelete?: boolean }> | null
}

const chatStore = chatChatStore()

let menuItem = ref<chatlist>({
  list: /* [
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
    {chatId:1,title:'1'},
  ] */null
})
const editInputRef = ref<HTMLInputElement | null>(null); 

const activeItem = ref<Number | null>(null);

const selectedItem = ref<number | null>(null);

const selectItem = (itemId: number) => {
  selectedItem.value = itemId
}

async function queryChatHistory() {
  chatStore.queryChat()
  menuItem.value = chatStore.getmenuItem1()
}

const editItem = async (item: any) => {
  item.isEditing = true
}

const saveEdit = async (item: any) => {
  item.isEditing = false;
  const { message } = await editTitle(item);
  Message.success('编辑成功！');
  queryChatHistory();
};

const handleBlur = (item: any) => {
  if(item.isEditing) {
    item.isEditing = false;
    saveEdit(item);    
  }
}

const deleteItem = async (item: any, ) => {
  item.isDelete = true
  const { message } = await deleteTitle(item)
  // console.log('item', item.chatId, chatStore.getChatId())
  if (item.chatId === chatStore.getChatId()) { 
    chatStore.updateChatId(null)
    chatStore.updateChatMessage()
  }
  item.isDelete = false
  Message.success('删除成功！') 
  queryChatHistory()
}

const showActions = (item: any) => {
  activeItem.value = item;
}

const hideActions = () => {
  activeItem.value = null;
}

const displayconversion = async (item: any, isEdit: any) => {
  if (isEdit.isEditing || isEdit.isDelete) {
    return
  }
  selectedItem.value = item
  chatStore.updateChatId(item)
  const { data } = await findConversion({
    chatId: item
  })
  chatStore.updateChatMessage(data.list)
}

onMounted(() => {
  queryChatHistory()
})
</script>

<style lang="less" scoped>
.list {
  margin-top: 10px;
}

.empty {
  margin-top: 250px;
}
.ant-list-item {
  justify-content: left;
  .item-content {
    margin-left: 8px;
    font-size: medium;
  }
}

.menuitem {
  display: flex;
  position: relative;
  width: 260px;
  height: 60px;
  border-radius: 15px;
  
  // border-color: transparent;
  background-color: #EFECF6;
}

.selected {
  background-color: #F7F7F7;
}

.menuitem:hover {
  background-color: #fff;
  cursor: pointer;
}

.editing {
  background-color: #fff;
  border: 1px solid #5B65F1;
}

.edit-icon,
.delete-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s ease;
}

.edit-icon {
  height: 50px;
  right: 35px;
}

.delete-icon {
  right: 10px;
}

.edit-icon:hover,
.delete-icon:hover {
  color: blue;
}
</style>
